<template>
	<view :class="themeStyle">
		<view class="store">
			<!-- 店铺信息 -->
			<diy-shop-info :siteId="siteId" :type="0"></diy-shop-info>

			<!-- 店铺描述 -->
			<view class="store-desc">
				<view class="desc-title">店铺介绍</view>
			</view>
			<view class="store-exper">
				<view class="exper-info">
					<view class="exper-desc ns-font-size-sm">{{ shopInfo.seo_description }}</view>
				</view>
			</view>
			<view class="store-eval">
				<view class="eval-li">
					<text class="ns-margin-right">描述相符</text>
					<view class="line ns-margin-right">
						<ns-progress :progress='shopDesccredit'></ns-progress>
					</view>
					<text class="ns-margin-right grade ns-text-color">{{ shopInfo.shop_desccredit }}</text>
				</view>
				<view class="eval-li">
					<text class="ns-margin-right">服务态度</text>
					<view class="line ns-margin-right">
						<ns-progress :progress='shopServicecredit'></ns-progress>
					</view>
					<text class="ns-margin-right grade ns-text-color">{{ shopInfo.shop_servicecredit }}</text>
				</view>
				<view class="eval-li">
					<text class="ns-margin-right">物流服务</text>
					<view class="line ns-margin-right">
						<ns-progress :progress='shopDeliverycredit'></ns-progress>
					</view>
					<text class="ns-margin-right grade ns-text-color">{{ shopInfo.shop_deliverycredit }}</text>
				</view>
			</view>

			<!-- 店铺权益 -->
			<block v-if="shopInfo.shop_zhping || shopInfo.shop_qtian || shopInfo.shop_erxiaoshi || shopInfo.shop_xiaoxie || shopInfo.shop_baozh || shopInfo.shop_tuihuo || shopInfo.shop_shiyong || shopInfo.shop_shiti">
				<view class="store-desc">
					<view class="desc-title">商家服务</view>
				</view>
				<view class="store-explain">
					<view class="explain-li" v-if="shopInfo.shop_zhping"><button type="primary" size="mini">正品保障</button></view>
					<view class="explain-li" v-if="shopInfo.shop_qtian"><button type="primary" size="mini">七天无理由退换</button></view>
					<view class="explain-li" v-if="shopInfo.shop_erxiaoshi"><button type="primary" size="mini">两小时发货</button></view>
					<view class="explain-li" v-if="shopInfo.shop_xiaoxie"><button type="primary" size="mini">消协保证</button></view>
					<view class="explain-li" v-if="shopInfo.shop_baozh"><button type="primary" size="mini">保证服务</button></view>
					<view class="explain-li" v-if="shopInfo.shop_tuihuo"><button type="primary" size="mini">退货承诺</button></view>
					<view class="explain-li" v-if="shopInfo.shop_shiyong"><button type="primary" size="mini">试用中心</button></view>
					<view class="explain-li" v-if="shopInfo.shop_shiti"><button type="primary" size="mini">实体验证</button></view>
				</view>
			</block>

			<!-- 店铺基础信息 -->
			<view class="store-desc">
				<view class="desc-title">店铺信息</view>
			</view>
			<view class="store-base-info">
				<view class="base-li" v-if="shopInfo.site_name">
					<text>店铺名称</text>
					<text>{{ shopInfo.site_name }}</text>
				</view>
				<view class="base-li" v-if="shopInfo.telephone">
					<text>服务电话</text>
					<text @click.stop="phone(shopInfo.telephone)">{{ shopInfo.telephone }}</text>
				</view>
				<view class="base-li" v-if="shopInfo.qq">
					<text>QQ</text>
					<text>{{ shopInfo.qq }}</text>
				</view>
				<view class="base-li" v-if="shopInfo.ww">
					<text>阿里旺旺</text>
					<text>{{ shopInfo.ww }}</text>
				</view>
				<view class="base-li" v-if="workingDay">
					<text>工作日</text>
					<text>{{ workingDay }}</text>
				</view>
			</view>
			
			<!-- 只有归属的那个店铺才有这个显示 -->
			<template v-if="memberInfo && memberInfo.source_member != 0 && memberInfo.belong_shop_id == siteId">
				<view class="store-desc">
					<view class="desc-title">购买权益卡</view>
				</view>
				<view class="store-base-info" v-if="shopInfo.latitude && shopInfo.longitude">
					<view class="ns-margin-top">
						<view class="shopInfo_text">
							<text>购买权益卡，享受更多服务</text>
						</view>
						<view @click="buyMemberCard">
							<image :src="$util.img('upload/uniapp/member/go-to.png')" mode=""></image>
						</view>
					</view>
				</view>
			</template>
			

			<view class="store-desc" v-if="shopInfo.latitude && shopInfo.longitude">
				<view class="desc-title">店铺位置</view>
			</view>
			<view class="store-base-info" v-if="shopInfo.latitude && shopInfo.longitude">
				<view class="ns-margin-top">
					<view class="shopInfo_text">
						<text>{{ shopInfo.full_address }}</text>
					</view>
					<view @click="openMap">
						<image :src="$util.img('upload/uniapp/member/arrow_1.png')" mode=""></image>
					</view>
				</view>
			</view>
			
			<template v-if="shopInfo.cert_info && shopInfo.cert_info.business_licence_number_electronic">
				<view class="store-desc">
					<view class="desc-title">营业执照</view>
				</view>
				<view class="image-box">
					<image :src="$util.img(shopInfo.cert_info.business_licence_number_electronic)" mode="widthFix"></image>
				</view>
			</template>
			
			<template v-if="shopInfo.cert_info && shopInfo.cert_info.other_qualification_doc">
				<view class="store-desc">
					<view class="desc-title">其它资质</view>
				</view>
				<view class="image-box" v-for="(item, index) in shopInfo.cert_info.other_qualification_doc.split(',')">
					<image :src="$util.img(item)" mode="widthFix"></image>
				</view>
			</template>
			<view style="height: 200rpx;"></view>
			<view class="follow-and-share">
				<view class="follow" @click="openSharePopup()"><text class="iconfont iconiconfontzhizuobiaozhun023130"></text></view>
				<!-- 	<view class="share ns-margin-left" @click="editCollection()">
					<text class="iconfont" :class="whetherCollection == 1 ? 'iconlikefill ns-text-color' : 'icongz'"></text>
				</view> -->
			</view>
			<loading-cover ref="loadingCover"></loading-cover>
			<!-- 底部tabBar -->
			<!-- <diy-bottom-nav type="shop" :site-id="siteId"></diy-bottom-nav> -->

			<!-- 海报 -->
			<view @touchmove.prevent.stop>
				<uni-popup ref="posterPopup" type="bottom" class="poster-layer">
					<template v-if="poster != '-1'">
						<view :style="{ height: posterHeight > 0 ? posterHeight + 80 + 'px' : '' }">
							<view class="image-wrap">
								<image :src="$util.img(poster)" :style="{ height: posterHeight > 0 ? posterHeight + 'px' : '' }" />
							</view>
							<!-- #ifdef MP || APP-PLUS  -->
							<view class="save" @click="saveGoodsPoster()">保存图片</view>
							<!-- #endif -->
							<!-- #ifdef H5 -->
							<view class="save">长按保存图片</view>
							<!-- #endif -->
						</view>
						<view class="close iconfont iconclose" @click="closePosterPopup()"></view>
					</template>
					<view v-else class="msg">{{ posterMsg }}</view>
				</uni-popup>
			</view>

			<!-- 分享弹窗 -->
			<view @touchmove.prevent.stop>
				<uni-popup ref="sharePopup" type="bottom" class="share-popup">
					<view>
						<view class="share-title">分享</view>
						<view class="share-content">
							<!-- #ifdef MP -->
							<view class="share-box">
								<button class="share-btn" :plain="true" open-type="share">
									<view class="iconfont iconiconfenxianggeihaoyou"></view>
									<text>分享给好友</text>
								</button>
							</view>
							<!-- #endif -->
							<view class="share-box" @click="openPosterPopup">
								<button class="share-btn" :plain="true">
									<view class="iconfont iconpengyouquan"></view>
									<text>生成分享海报</text>
								</button>
							</view>
						</view>
						<view class="share-footer" @click="closeSharePopup"><text>取消分享</text></view>
					</view>
				</uni-popup>
			</view>
		</view>
		<!-- 底部tabBar -->
		<diy-bottom-nav type="shop" :site-id="siteId"  @isBulge="isBulge"></diy-bottom-nav>
	</view>

</template>

<script>
	import introduce from '../public/js/introduce.js';
	import diyShopInfo from '@/components/diy-shop-info/diy-shop-info.vue';
	import nsProgress from '@/components/ns-progress/ns-progress.vue';
	import Map from '@/common/js/map/openMap.js'
	import Maps from '@/components/open_map/open_map.js';
	import diyBottomNav from '@/components/diy-bottom-nav/diy-bottom-nav.vue';

	export default {
		components: {
			Maps,
			diyShopInfo,
			nsProgress,
			diyBottomNav,
		},
		data() {
			return {
				siteId: 0,
				poster: "-1", //海报
				posterMsg: "", //海报错误信息
				posterHeight: 0,
				Bulge:false,
				memberInfo:null,//用户信息
			};
		},
		computed: {
			//vueX页面主题
			themeStyle() {
				return 'theme-' + this.$store.state.index.themeStyle
			},
			markers() {
				let array = []
				if (this.shopInfo && this.shopInfo.latitude && this.shopInfo.longitude) {
					array.push({
						id: 0,
						latitude: this.shopInfo.latitude,
						longitude: this.shopInfo.longitude,
						iconPath: '/static/location.png',
						width: 25,
						height: 25
					})
				} else {
					array = []
				}
				return array
			}
		},
		mixins: [introduce],
		onLoad(options) {
			if (!options.site_id) {
				this.$util.redirectTo('/otherpages/shop/index/index', {}, 'redirectTo');
				return;
			}
			this.siteId = options.site_id;
			this.getShopInfo();
			this.getMemberInfo();
		},
		onShow() {
			// 刷新多语言
			this.$langConfig.refresh();
		},
		methods: {
			isBulge(e){
				this.Bulge=e;
			},
			phone(e) {
				uni.makePhoneCall({
					phoneNumber: e
				});
			},
			// 地图
			openMap() {
				var options = {
					/* origin:{  //导航起点坐标和名称,如果不传则起点为当前位置
					 latitude:39.92848272,
					 longitude:116.39560823,
					 name:"起点"
					}, */
					destination: { //导航终点点坐标和名称
						latitude: this.shopInfo.latitude,
						longitude: this.shopInfo.longitude,
						name: ` ${this.shopInfo.full_address}${this.shopInfo.address}`
					},
					mode: "drive" //导航方式 公交：bus驾车：drive（默认）,步行：walk,骑行：bike
				}
				Maps.openMap(options, "gcj02")
			},
			
			openMapLg() {
				Map.openMap(Number(this.shopInfo.latitude), Number(this.shopInfo.longitude), this.shopInfo.site_name)
			},
			//-------------------------------------分享-------------------------------------
			// 打开分享弹出层
			openSharePopup() {
				this.$refs.sharePopup.open();
			},
			// 关闭分享弹出层
			closeSharePopup() {
				this.$refs.sharePopup.close();
			},
			//-------------------------------------海报-------------------------------------

			// 打开海报弹出层
			openPosterPopup() {
				this.getGoodsPoster();
				this.$refs.sharePopup.close();
				this.$refs.posterPopup.open();
				if (this.poster != '-1') {
					setTimeout(() => {
						let view = uni.createSelectorQuery().in(this).select(".poster-layer .image-wrap");
						view.fields({
							size: true,
						}, data => {
							let posterWhith = data.width;
							let ratio = parseFloat((740 / posterWhith).toFixed(2));
							if (this.token != '') {
								this.posterHeight = parseInt(1120 / ratio);
							} else {
								this.posterHeight = parseInt(1100 / ratio);
							}
						}).exec();
					}, 100);
				}
			},
			// 关闭海报弹出层
			closePosterPopup() {
				this.$refs.posterPopup.close();
			},
			//生成海报
			getGoodsPoster() {
				//活动海报信息
				let qrcode_param = {
					site_id: this.siteId
				};
				if (this.memberId) qrcode_param.source_member = this.memberId;
				this.$api.sendRequest({
					url: "/api/shop/poster",
					data: {
						page: '/otherpages/shop/introduce/introduce',
						qrcode_param: JSON.stringify(qrcode_param),
						// #ifdef APP-PLUS
						app_type: 'weapp',
						app_type_name: '微信小程序',
						// #endif
					},
					success: res => {
						if (res.code == 0) {
							this.poster = res.data.path;
						} else {
							this.posterMsg = res.message;
						}
					}
				});
			},
			//购买权益卡
			buyMemberCard(){
				this.$util.redirectTo('/otherpages/member/level/check_level');
			}
		}
	};
</script>

<style lang="scss">
	// map
	.ns-margin-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top:10rpx !important;

		.shopInfo_text {
			display: flex;
			flex-direction: column;
		}

		image {
			width: 100rpx;
			height: 100rpx;
			display:block;
		}
	}

	.follow-and-share {
		position: fixed;
		bottom: 50rpx;
		right: 30rpx;
		background-color: rgba(0, 0, 0, 0.5);
		height: 60rpx;
		width: 60rpx;
		text-align: center;
		line-height: 60rpx;
		border-radius: 50%;

		text {
			color: #fff
		}
	}

	@import '../public/css/introduce.scss';

	//fenxiang
	.share-popup,
	.uni-popup__wrapper-box {
		// position: absolute;
		z-index: 9999 !important;

		.share-title {
			line-height: 60rpx;
			font-size: $ns-font-size-lg;
			padding: 15rpx 0;
			text-align: center;
			z-index: 9999 !important;
		}

		.share-content {
			display: flex;
			display: -webkit-flex;
			-webkit-flex-wrap: wrap;
			-moz-flex-wrap: wrap;
			-ms-flex-wrap: wrap;
			-o-flex-wrap: wrap;
			flex-wrap: wrap;
			padding: 15rpx;

			.share-box {
				flex: 1;
				text-align: center;

				.share-btn {
					margin: 0;
					padding: 0;
					border: none;
					line-height: 1;
					height: auto;

					text {
						margin-top: 20rpx;
						font-size: 24rpx;
						display: block;
						color: $ns-text-color-black;
					}
				}

				.iconfont {
					font-size: 80rpx;
					line-height: initial;
				}

				.iconpengyouquan,
				.iconiconfenxianggeihaoyou {
					color: #07c160;
				}
			}
		}

		.share-footer {
			height: 90rpx;
			line-height: 90rpx;
			border-top: 2rpx #f5f5f5 solid;
			text-align: center;
			color: #666;
		}
	}

	// 海报
	// .uni-popup__wrapper-box
	.poster-layer {
		.generate-poster {
			padding: 40rpx 0;

			.iconfont {
				font-size: 80rpx;
				color: #07c160;
				line-height: initial;
			}

			>view {
				text-align: center;

				&:last-child {
					margin-top: 20rpx;
				}
			}
		}

		.image-wrap {
			width: 70%;
			margin: 30px auto 20px auto;
			box-shadow: 0 0 16px rgba(100, 100, 100, 0.3);

			image {
				width: 100%;
				height: 100%;
				height: 750rpx;
			}
		}

		.msg {
			padding: 40rpx;
		}

		.save {
			text-align: center;
			height: 80rpx;
			line-height: 80rpx;
		}

		.close {
			position: absolute;
			top: 0;
			right: 20rpx;
			width: 40rpx;
			height: 80rpx;
			font-size: 50rpx;
		}
	}
	.image-box{
		width: 100%;
		text-align: center;
		
		image{
			width: 100%;
		}
	}
</style>
<style scoped>
	/deep/ uni-map {}
</style>
